<!--将ts中的formModel绑定到form的属性formGroup中-->
<!--订阅ngSubmit事件，点击后调用onSearch()方法-->
<!--novalidate禁用原生的浏览器表单验证-->
<form [formGroup]="formModel" (ngSubmit)="onSearch()" novalidate>

  <div class="form-group" [class.has-error]="formModel.hasError('minlength',['title'])">
    <label for="title">Product title:</label>
    <input id="title"
           placeholder="Title"
           class="form-control"
           type="text"
           formControlName="title"
           minlength="3"
           >
    <span class="help-block" [class.hidden]="!formModel.hasError('minlength', ['title'])">
      Type at least 3 characters
    </span>
  </div>

  <div class="form-group" [class.has-error]="formModel.hasError('positivenumber',['price'])">
    <label for="price">Product price:</label>
    <input id="price"
           placeholder="Price"
           class="form-control"
           type="number"
           step="any"
           min="0"
           formControlName="price">
    <span class="help-block" [class.hidden]="!formModel.hasError('positivenumber',['price'])">
      Price is not a positive number
    </span>
  </div>
  <div class="form-group">
    <label for="category">Product category:</label>
    <select id="category"
            class="form-control"
            formControlName="category">
    <option value="-1">All categories</option>
    <option *ngFor="let c of categories" [value]="c">{{c}}</option>
    </select>
  </div>

  <div class="form-group">
    <button type="submit"
            class="btn btn-primary btn-block">Search</button>
  </div>
</form>